<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>cart</title>
    <link rel="StyleSheet" href="/css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/top">
</div>


<div id="Content">

    <div id="BackLink">
        <a href="/catalog/main">Return to Main Menu</a>
    </div>

    <div id="Catalog">

        <div id="Cart">

            <h2>Shopping Cart</h2>
            <form action="/cart/updateCartQuantities" method="post">
                <script>
                    function updateCart() {
                        var btn = document.getElementById("update");
                        btn.click();
                    }
                </script>
                <table>

                    <tr>
                        <th><b>Item ID</b></th>
                        <th><b>Product ID</b></th>
                        <th><b>Description</b></th>
                        <th><b>In Stock?</b></th>
                        <th><b>Quantity</b></th>
                        <th><b>List Price</b></th>
                        <th><b>Total Cost</b></th>
                        <th>&nbsp;</th>
                    </tr>


                    <tr th:if="${cart.size()==0}">
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>



                    <tr th:if="${cart.size()!=0}" th:each="cartItem:${cart}">
                        <td>
                            <a th:text="${cartItem.item.itemId}" th:href="@{/cart/viewItem(itemId=${cartItem.item.itemId},username=${session.username})}">itemId</a>
                        </td>
                        <td th:text="${cartItem.item.product.productId}">
                            productId
                        </td>
                        <td th:text="${cartItem.item.attribute1}+${cartItem.item.product.name}">

                        </td>
                        <td th:text="${cartItem.inStock}">
                            inStock
                        </td>
                        <td>
                            <label>
                                <input type="text" th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}" onchange="updateCart()"/>
                            </label>
                        </td>
                        <td th:text="${cartItem.item.listPrice}" pattern="$#,##0.00" >
                            2.33
                        </td>
                        <td th:text="${cartItem.total}" pattern="$#,##0.00">
                            2.33
                        </td>
                        <td>
                            <a th:href="@{removeItemFromCart(workingItemId=${cartItem.item.itemId},username=${session.username})}" class="Button">Remove</a>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="7">
                            <input type="submit" id="update" value="Update Cart"/>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </form>

            <tr th:if="${cart.size()>0}">
                <a href="/order/checkout" class="Button">Proceed to Checkout</a>
            </tr>
        </div>

        <div id="Separator">&nbsp;</div>
    </div>
</div>

<div th:replace="common/bottom">
</div>
</body>
</html>